<template>
    <view
      :style="'direction:' + $t('dir')"
      :class="$t('dir') == 'rtl' ? 'rtl' : 'ltr'"
    >
      <navbar :title="$t('info')" :back="true" navbarBg="#FFF" bgLayer="none" />
   
      <view class="tab" style="position: sticky; z-index: 999" :style="{ top: headerArea.title_height + headerArea.menuTop + 'px' }">
        <u-grid :border="false" @click="clickGrid" col="4">
          <u-grid-item
            v-for="(baseListItem, baseListIndex) in baseList"
            :key="baseListIndex"
          >
            <u--image
              :showLoading="true"
              :src="baseListItem.src"
              width="80rpx"
              height="80rpx"
            ></u--image>
  
            <text class="grid-text">{{
              $t("dir") == "rtl" ? baseListItem.title : baseListItem.titleCn
            }}</text>
          </u-grid-item>
        </u-grid>
      </view>
  
  
      <view class="main">
        <view style="padding-bottom: 130rpx; min-height: 1200rpx">
          <view class="d-flex flex-wrap items-center justify-center" >
            <house-row
              v-for="(item, i) in dataList.data"
              :item="item"
              :key="i"
              @click="toDetail(item)"
            />
          </view>
          <u-empty
            v-if="
              dataList &&
              dataList.length == 0 &&
              dataList.loadmoreStatus != 'loading'
            "
            mode="list"
            icon="/static/images/empty.png"
            :text="$t('no_content')"
            style="padding-top: 250rpx"
          />
          <u-loadmore
            v-else
            :status="dataList.loadmoreStatus"
            :loading-text="$t('loadingText')"
            loadmore-text="."
            nomoreText="."
            :isDot="true"
            :line="dataList.loadmoreStatus == 'nomore'"
            color="#bfbfbf"
          />
        </view>
      </view>
      <u-back-top :scroll-top="scrollTop" />
    </view>
  </template>
  <script>
  export default {
    data() {
      return {
        baseList: [
          {
            src: "/static/images/grid/餐饮.png",
            titleCn: "餐饮",
            title: "يىمەك-ئىچمەك",
            id: 1,
          },
          {
            src: "/static/images/grid/服装.png",
            titleCn: "服装",
            title: "كىيىم-كېچەك",
            id: 2,
          },
          {
            src: "/static/images/grid/日用品.png",
            titleCn: "日用品",
            title: "تۇرمۇش بۇيۇم",
            id: 3,
          },
          {
            src: "/static/images/grid/其他.png",
            titleCn: "其他",
            title: "باشقىلار",
            id: 0,
          },
        ],
        dataList: {
          current_page: 1,
          data: [],
          last_page: 1,
          loadmoreStatus: "loadmore",
        },
        scrollTop: 0
      };
    },
    onLoad() {     this._indexPage()},
    onShow() {},
    async onPullDownRefresh() {
      await this._index();
      this.dataList.current_page = 1;
      await this._indexPage();
      uni.stopPullDownRefresh();
    },
    onReachBottom() {},
    async onReachBottom() {
      if (
        this.dataList.current_page <
        this.dataList.last_page
      ) {
        this.dataList.current_page += 1;
        await this._indexPage();
      }
    },
    onPageScroll(e) {
          this.scrollTop = e.scrollTop;
      },
    methods: {
      clickGrid(e) {
        console.log('exc',e)
            uni.navigateTo({
              url: "/detailList/pages/sodaDetail?id="+(e+1),
            });
      },
     async _indexPage() {
      this.dataList.loadmoreStatus = "loading";
      let page = this.dataList.current_page;
      let params = {
        page: page,
        pageSize: 10,
        _id: 8,
      };
      await this.$uniapi("/get_info_list", params)
        .then((res) => {
          this.dataList.loadmoreStatus = "loadmore";
          if (res.code == 200) {
            let uqur = res.list;

            if (page == 1) {
              this.dataList.data = uqur.data;
              console.log("uqur", uqur.data);
            } else this.dataList.data.push(...uqur.data);
            this.dataList.current_page = uqur.current_page;
            this.dataList.last_page = uqur.last_page;
            if (uqur.current_page == uqur.last_page)
              this.dataList.loadmoreStatus = "nomore";
          }
        })
        .catch((err) => {
          this.dataList.loadmoreStatus = "loadmore";
        });
    },
    },
    computed: {
          headerArea() {
              let area = uni.getSystemInfoSync()
              // #ifdef MP-WEIXIN
              let menu = uni.getMenuButtonBoundingClientRect()
  
              console.log('area:', area)
              console.log('menu:', menu)
  
              return {
                  status_height: area.statusBarHeight,
                  title_height: menu.height + (menu.top - area.statusBarHeight) * 2,
                  menuLeft: menu.left,
                  menuTop: menu.top - (menu.top - area.statusBarHeight),
              }
              // #endif
              // #ifndef MP-WEIXIN
              return {
                  status_height: area.statusBarHeight,
                  title_height: uni.upx2px(82),
                  menuLeft: 0,
                  menuTop: uni.upx2px(88),
              }
              // #endif
          },
      },
  };
  </script>
  <style lang="scss">
  .tab {
    padding: 10rpx;
    width: 95vw;
    background: #fff;
    border-radius: 25rpx;
    margin: 10rpx ;
    box-shadow: 0px 0px 20px 1px #cccccc47;
  }
  .grid-text {
    font-size: 14px;
    color: #000;
    padding: 10rpx 0 20rpx 0rpx;
    /* #ifndef APP-PLUS */
    box-sizing: border-box;
    /* #endif */
  }
  </style>